<template>
  <div>
    <el-alert
      center
      show-icon
      title="添加商品信息"
      type="info">
    </el-alert>
    <el-steps :active="paneName*1" align-center finish-status="success" style="margin: 15px 0;">
      <el-step title="基本信息"></el-step>
      <el-step title="商品参数"></el-step>
      <el-step title="商品属性"></el-step>
      <el-step title="商品图片"></el-step>
      <el-step title="商品内容"></el-step>
      <el-step :status="success" title="完成"></el-step>
    </el-steps>
    <el-tabs
      v-model="paneName"
      :before-leave="beforeLeave"
      style="height: 100%;"
      tab-position="left"
    >
      <el-tab-pane label="基本信息">
        <Information
          ref="cascade"
          :options="options"
          :ruleForm="ruleForm"
          :valueId.sync="valueId"
          @getCategories="getCategories"
        ></Information>
      </el-tab-pane>
      <el-tab-pane label="商品参数">
        <div v-for="(item,i) in attrs1" :key="item.attr_id">
          <span>{{ item.attr_name }}</span>
          <el-checkbox v-for="(ite,index) in item.attr_vals.split(' ')"
                       :key="index"
                       :ref="item.attr_id+index"
                       border
                       checked
                       label="1"
                       @click.native.prevent="removeTag(i,index)"
          >
            {{ ite }}
          </el-checkbox>
        </div>
      </el-tab-pane>
      <el-tab-pane label="商品属性">
        <InformationAttrs :attrs="attrs2"></InformationAttrs>
      </el-tab-pane>
      <el-tab-pane label="商品图片">
        <UpLoadPhoto></UpLoadPhoto>
      </el-tab-pane>
      <!--      富文本编辑器-->
      <el-tab-pane class="ql-container-text" label="商品内容">
        <quillEditor v-model="ruleForm.goods_introduce"></quillEditor>
        <el-button type="primary" @click="addNewGoods">添加商品</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 富文本编辑器

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
// 富文本编辑器

import Information from '@/views/commodity/components/Information'
import InformationAttrs from '@/views/commodity/components/InformationAttrs'
import UpLoadPhoto from '@/views/commodity/components/UpLoadPhoto'
import { getCategories, getCategoriesMany, getCategoriesOnly, postGoods } from '@/api/commodity'

export default {
  name: 'AddGoods',
  components: {
    Information,
    InformationAttrs,
    UpLoadPhoto,
    quillEditor
  },
  created () {
    this.getCategoriesList()
    this.getCategories()
  },
  methods: {
    // 点击切换选项
    tabClick () {
      // console.log(item)
      const flag = this.$refs.cascade.valueArr.length === 3
      if (!flag) {
        this.$message({
          type: 'error',
          message: '必须选择有三级分类的项目'
        })
      }
      return flag
    },
    // 获得商品分类 级联选择器
    async getCategoriesList () {
      try {
        const res = await getCategories()
        if (res.meta.status === 200) {
          // console.log(res.data)
          this.options = res.data
        } else {
          this.$message(res.meta.msg)
        }
      } catch {
        this.$message('商品分类列表初始化失败')
      }
    },
    // 获得参数
    async getCategories () {
      if (this.valueId === '') return
      const res = await getCategoriesMany(this.valueId)
      const res2 = await getCategoriesOnly(this.valueId)
      console.log(res.data, res2.data)
      this.attrs1 = res.data
      this.attrs2 = res2.data
    },
    // 点击删除标签
    removeTag (i, index) {
      const arr = this.attrs1[i].attr_vals.split(' ')
      arr.splice(index, 1)
      console.log(arr)
      if (arr.length === 0) {
        this.attrs1[i].attr_vals = arr.join(' ')
      } else {
        this.attrs1[i].attr_vals = ''
      }
    },
    // 添加商品
    async addNewGoods () {
      this.paneName = '5'
      await this.$refs.cascade.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.ruleForm.attrs.push(...this.attrs1, ...this.attrs2)
          // console.log(this.ruleForm.attrs)
          try {
            const res = await postGoods(this.ruleForm)
            if (res.meta.status === 201) {
              this.$message({
                type: 'success',
                message: '添加成功'
              })
              this.success = 'success'
              await this.$router.push('/goods')
            } else {
              this.$message({
                type: 'error',
                message: res.meta.msg
              })
            }
          } catch (e) {
            this.$message({
              type: 'error',
              message: '添加失败'
            })
          }
        } else {
          this.paneName = '0'
          this.$message({
            type: 'error',
            message: '请正确填写表单'
          })
        }
      })
    }
  },
  data () {
    return {
      beforeLeave: () => {
        return this.tabClick()
      },
      paneName: '0',
      ruleForm: {
        goods_name: '',
        goods_price: '',
        goods_weight: '',
        goods_number: '',
        goods_cat: '1,3,6',
        attrs: [],
        goods_introduce: ''
      },
      attrs1: [],
      attrs2: [],
      options: [],
      valueId: 6,
      success: ''
    }
  }
}
</script>

<style lang="less" scoped>
</style>
